<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
			<!-- 账户流水 -->
			<div class="table-form">
				<h2 class="lietou-detail-h1"></h2>
				<el-form ref="form" :inline="true" label-width="90px" size="small" style="margin-bottom:20px;">
					<el-form-item label="手机号" label-width="70px">
						<el-input placeholder="请输入手机号" v-model="searchPhone" class="search-input" maxlength="11" clearable></el-input>
					</el-form-item>
					<el-form-item label="名称" label-width="70px">
						<el-input placeholder="请输入名称" v-model="username" class="search-input" clearable></el-input>
					</el-form-item>
					<el-form-item label="处理状态" class="search-bar">
						<el-select placeholder="请选择" v-model="status" style="width: 90px;">
							<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item style="margin:-2px 0 0 10px;">
						<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable"
					style="width: 100%;" :header-cell-style="{ background: '#eee',color:'#555555'}" stripe
					:row-style="{height:'54px'}" :highlight-current-row="true">
					<el-table-column fixed type="index" label="序列" width="90" column-key="id" align="center"></el-table-column>
					<el-table-column prop="realname" label="猎头名称" align="center"></el-table-column>
					<el-table-column prop="usertel" label="手机号" align="center"></el-table-column>
					<el-table-column prop="money" label="提现金额(元)" align="center"></el-table-column>
					<el-table-column prop="cashflow" label="流水号/拒绝原因" align="center"></el-table-column>
					<el-table-column prop="create_time" label="提现日期" align="center"></el-table-column>
					<el-table-column align="center" label="操作" width="300">
						<template slot-scope="scope">
							<div v-if="scope.row.cashtype==1">
								<el-button slot="reference" size="small" type="primary" class="handle-btn" @click="onConfirm(scope.row.id)">确认打款</el-button>
								<el-button slot="reference" type="danger" size="small" class="handle-btn" @click="onRefuse(scope.row.id)">拒绝打款</el-button>
							</div>
							<span v-else>{{scope.row.cashtypeText}}</span>
						</template>
					</el-table-column>
				</el-table>
				<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
					<el-col :span="24" style="text-align:center;margin-top:50px">
						<el-pagination background layout="prev, pager, next" :page-size="pageSize"
							:page-count="pageCount" :current-page="pageNo" @current-change="pageChange">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'FinaceLietou',
		components: {
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone: '',
				username: '',
				//审核状态-1 已取消 1 待审核 2 已通过 3 已拒绝
				statusList: [{ value: '', label: '全部' }, 
								{ value: '-1', label: '已取消' }, 
								{ value: '1', label: '待审核' }, 
								{ value: '2', label: '已通过' },
								{ value: '3', label: '已拒绝' }],
				status: '',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10
			}
		},
		async created() {
			this.loadData();
		},
		methods: {
			// 搜索
			searchData() {
				this.pageNo = 1;
				this.loadData();
			},
			//分页
			pageChange(val) {
				this.pageNo = val;
				this.loadData()
			},
			async loadData() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
				});
				try {
					let data = {
						"token": this.token,
						"mobile": this.searchPhone,
						"realname": this.username,
						"cashtype": this.status,
						"is_agent": 0	,// 1 是猎头 2 是代理 0 是全部
						"p": this.pageNo, //分页页码
						"size": this.pageSize, //分页每页数量
					}
					let res = await this.$http({
						url: '/man/pay/getCashList',
						method: 'post',
						params: data
					});
					res.data.forEach(item => {
						//审核状态-1 已取消 1 待审核 2 已通过 3 已拒绝
						if (item.cashtype == -1) {
							item.cashtypeText = '已取消';
						} else if (item.cashtype == 1) {
							item.cashtypeText = '待审核';
						}
						if (item.cashtype == 2) {
							item.cashtypeText = '已通过';
						}
						if (item.cashtype == 3) {
							item.cashtypeText = '已拒绝';
						}
					})
					this.tableData = res.data;
					this.pageCount = res.max_page; //总页数
					this.pageNo = Number(res.p); //当前页 size当前页
					loading.close();
				} catch (e) {
					console.log(e)
					loading.close();
				}
			},
			// 确认打款
			onConfirm(id) {
				this.$prompt('是否确认打款？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern:  /^\w+$/,
				   inputPlaceholder:'请输入打款流水号',
					inputErrorMessage: '流水号只能是数字、字母和下划线',
					closeOnClickModal: false
				}).then(({ value }) => {
					this.shenheHandle(2, id, value);
				}).catch(error=>{
					
				})
			},
			onRefuse(id) {
				this.$prompt('是否拒绝打款？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValidator: (val) => {
						return val!=''&&val!=null?true:false
					},
				   inputPlaceholder:'请输入拒绝打款原因',
					inputErrorMessage: '请输入拒绝打款原因',
					closeOnHashChange: false,
					closeOnClickModal: false
				}).then(({ value }) => {
					this.shenheHandle(3, id, value);
				}).catch(error=>{
					
				})
			},
			// 审核操作
			async shenheHandle(done, id, value){
				try {
					let res = await this.$http({
						url: '/man/pay/shenheCash',
						method: 'post',
						params: {
							"token": this.token,
							"id":id,
							"cashtype": done,	//审核状态 2 已通过 3 已拒绝	2
							"cashflow": value
						}
					});
					this.$message({
						type: 'success',
						message: res.msg
					});
					this.pageNo=1;
					this.loadData();
				} catch (e) {
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail {
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;

		.detail-bg {
			position: fixed;
			top: 0px;
			left: 0;
			bottom: 0;
			right: 0;
			background: #f4f4f4;
		}

	}

	.el-button.buttonStyle {
		height: 32px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: #3674FF;
		border-radius: 5px;
		border: 0;
		margin-left: 6px;
		margin-top: 2px;
	}

	.el-button.buttonStyle2 {
		font-size: 14px;
		border-radius: 5px;
		margin-left: 15px;
	}

	.lietou-detail-head {
		background-color: #fff;
		margin: 0 0 20px 0px;
		padding-bottom: 25px;
		position: relative;
		min-width: 800px;

		.lietou-msg {
			width: 280px;
			display: flex;
			margin-left: 30px;
		}

		.works {
			position: absolute;
			top: 20px;
			right: 30px;
			color: rgba(33, 120, 241, 1);
		}

		.lietou-number {
			border-left: 1px #ddd solid;
			padding-left: 30px;
			margin-top: 30px;
		}

		.lahei-btn {
			position: absolute;
			right: 30px;
			top: 25px;
		}

		.acount {
			margin: 0 0 20px 30px;
			padding-top: 8px;

			span {
				margin-right: 50px;
			}
		}

		.answerTable {
			margin: 10px auto;
			width: 96%;
		}

		.acount-balance {
			font-size: 36px;
			font-weight: 500;
		}

		.submit-btn {
			display: block;
			margin-top: -5px;
		}
	}

	.table-form {
		background-color: #fff;
		padding: 0 20px 20px;
	}

	.lietou-detail-h1 {
		font-size: 17px;
		line-height: 20px;
		font-weight: bold;
		padding: 5px 0 5px;
	}

	.search-bar {
		::v-deep {
			.el-form-item__label {
				font-weight: 500;
			}
		}
	}

	.handle-btn {
		border-radius: 5px;
		margin: 0 8px;
	}
</style>
<style>
	.el-message {
		top: 120px !important;
	}
</style>
